<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="stylesheet" href="../css/jpetstore.css" type="text/css" media="screen" />
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>

</head>
<body>

<div th:fragment="fields">

    <h3>Account Information</h3>

    <table>
        <tr>
            <td>First name:</td>
            <td><input type="text" th:value="${account.firstName}" name="firstName"></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td><input type="text" th:value="${account.firstName}" name="lastName"></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input type="text" name="email" size="40"></td>
        </tr>
        <tr>
            <td>Phone:</td>
            <td><input type="text" name="phone"></td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td><input type="text" name="address1"></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td><input type="text" name="address2" size="40"></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" name="city"></td>
        </tr>
        <tr>
            <td>State:</td>
            <td><input type="text" name="state" size="4"></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td><input type="text" name="zip" size="10"></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" name="country" size="15"></td>
        </tr>
    </table>

    <h3>Profile Information</h3>

    <table>
        <tr>
            <td>Language Preference:</td>
            <td>
                <select name="languagePreference">
                    <option th:each="language:${LANGUAGE_LIST}" th:value="${language}" th:text="${language}">

                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Favourite Category:</td>
            <td>
                <select name="favouriteCategoryId">
                    <option th:each="categoryId:${CATEGORY_LIST}" th:value="${categoryId}" th:text="${categoryId}">

                    </option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Enable MyList</td>
            <td><input type="checkbox" name="listOption"></td>
        </tr>
        <tr>
            <td>Enable MyBanner</td>
            <td><input type="checkbox" name="BannerOption"></td>
        </tr>
    </table>
</div>

</body>
</html>